<!--产品管理-->
<template>
  <div>
    <!-- 按钮 -->
    <div class="buttons">
      <el-row>
        <el-input  class="btn" placeholder="请输入名称" v-model="queryParams.name" clearable></el-input>
        <el-button class="btn"  type="primary" round @click="queryButton">查询</el-button>
        <el-button class="btn"  type="primary" round @click="toAdd">新增</el-button>
      </el-row>
    </div>
    <!-- 表格 -->
    <div>
      <el-table stripe size="medium " :data="productData" height="calc(100vh - 160px)" style="width: 100%">
        <el-table-column align="center" type="index" :index="indexMethod"  label="序号"  width="50"></el-table-column>
        <el-table-column align="center" prop="id" label="编号" width="100"></el-table-column>
        <el-table-column align="center" prop="name" label="名称" width="150"></el-table-column>
        <el-table-column align="center" prop="description" label="描述" width="180"></el-table-column>
        <el-table-column align="center" prop="price" label="价格"></el-table-column>
        <el-table-column align="center" prop="status" label="状态"></el-table-column>
        <!-- <el-table-column align="center" prop="photo" label="照片"></el-table-column> -->
        <el-table-column align="center" prop="categoryId" label="类别编号"></el-table-column>
        <el-table-column label="操作" width="290" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleEntail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" top="10px">
      <el-form :model="form"> 
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="form.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别编号" :label-width="formLabelWidth">
          <el-input v-model="form.categoryId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      queryParams: {
        page: "0", 
        pageSize: "99",
        status: "",
        name:'',
      },
      form:{
        id:'',
        name:'',
        description:'',
        price:'',
        status:'',
        photo:'',
        categoryId:'',
      },
      dialogFormVisible:false,
      formLabelWidth:"150px",
      title:'新增产品信息',
    };
  },
  computed: {
    ...mapState("product", ["totalData","TotalAllDate"]),
    ...mapGetters("product", ["productData", "total"]),
  },
  methods: {
    ...mapActions("product", ["query","saveOrUpdate","findAll","deleteById"]),
    // handleSizeChange(val) {
    //   //每页条数发生变化的事件处理函数
    //   console.log(`每页 ${val} 条`);
    //   //改变数据模型中的pageSize,设置page为1,发起请求
    //   this.queryParams.pageSize = val;
    //   this.queryParams.page = 1;
    //   //发起请求
    //   this.findAll(this.queryParams);
    // },
    // handleCurrentChange(val) {
    //   //页码发生变化的时间处理程序
    //   console.log(`当前页: ${val}`);
    //   this.queryParams.page = val;
    //   this.findAll(this.queryParams);
    // },

    indexMethod(index){
      // let { page, pageSize } = this.queryParams;
      // return (page - 1) * pageSize + index + 1;
      return index+1;
    },
    queryButton(){
      this.query(this.queryParams);
    },
    toAdd(){
      this.form={};
      this.dialogFormVisible=true;
      this.title='新增产品';
    },
    toConfirm(){
        this.queryParams.pageSize++;
        if(this.form.name !=''){

          this.saveOrUpdate({form:this.form,queryParams:this.queryParams}).then(()=>{
            this.dialogFormVisible=false;
          })
        }else{
           this.$notify({
                       title: "失败",
                       message: "这是一条失败的提示消息,请输入名称",
                       type: "error",
                     });
        }
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.form={...row};
      this.title="修改产品信息";
      this.dialogFormVisible=true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      // this.deleteById({id:row.id})
      //询问用户是否删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          //发送请求
        this.deleteById({id:row.id}).then((res) => {
            
              //提示用户删除成功,并且刷新数据

                                this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
              this.queryParams.page = 0;
              this.query(this.queryParams);
      
            }).catch((err) => {
                     this.$notify({
                       title: "失败l",
                       message: "这是一条失败的提示消息",
                       type: "error",
                     });
              this.queryParams.page = 0;
              this.query(this.queryParams);
            });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    
    },
    handleEntail(index,row){
      console.log(index,row);
      this.queryParams.name=row.name;
      this.$router.push(`/productDetail/${this.queryParams.name}/index`);
    }
  },
  created() {
    this.query(this.queryParams);
    // this.findAll();
  },
  mounted() {},
};
</script>
<style>
  .buttons .btn{
    margin-top: 10px;
    width: 70px;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .btn:first-child{
    width: 250px;
  }
</style>